<template>
	<div class="body-xl">
		<HeaDer></HeaDer>
		<div class="top-xl">
			<div class="row-xl">
				<div class="left-xl">
					<span>当前位置：</span>
					<el-breadcrumb separator-class="el-icon-arrow-right">
					  <el-breadcrumb-item :to="item.path" v-for="item in breadcrumb">{{item.name}}</el-breadcrumb-item>
					</el-breadcrumb>
				</div>
				<div class="right-xl">
					<el-input
						placeholder="请输入关键字查询"
						suffix-icon="el-icon-search"
						v-model="queryParams.activityName"
            @keyup.enter.native="getList">
					</el-input>
				</div>
			</div>
		</div>
		<div class="top-content-xl">
			<div class="row-xl">
				<div class="tabs-xl">
					<div class="left-xl">活动类型：</div>
					<ul class="right-xl right1">
						<li v-for="(item,index) in tabs1_xl" :class="index==0?'on':''" @click="tabs1($event,item.name)" :key="index">{{item.name}}</li>
					</ul>
				</div>
				<div class="tabs-xl">
					<div class="left-xl">活动状态：</div>
					<ul class="right-xl right2">
						<li v-for="(item,index) in tabs2_xl" :class="index==0?'on':''" @click="tabs2($event,item.name)" :key="index">{{item.name}}</li>
					</ul>
				</div>

			</div>
		</div>
		<div class="main-xl">
			<div class="row-xl">
				<div class="column-xl on" v-for="item in publicList" v-if="publicList.length!==0">
					<div class="bg-xl">
						<img :src="item.activityPicture!==null?item.activityPicture:require('../../assets/images/xl-hdpxl-img2.jpg')" alt="">
						<span v-if="item.activityPicture===null">{{item.activityName}}</span>
						<i>{{item.type}}</i>
					</div>
					<div class="center-content-xl">
						<div class="left-xl">
							<img :src="item.logoUrl" alt="">
						</div>
						<div class="right-xl">{{item.organizationName}}</div>
					</div>
					<div class="title-xl">{{item.activityName}}</div>
					<div class="bottom-xl">
						<div class="left-xl " :class="item.status!=='报名'?'state2':'state1'" >{{item.status}}</div>
						<div class="right-xl">
							{{item.creationTime}}
						</div>
					</div>
					<div class="address-xl">{{item.location}}</div>
					<div :class="item.status!=='报名'?'btn-xl2':'btn-xl'" @click="baoming(item)">
						查看详情
					</div>
				</div>
				<div style="position: relative;width: 100%;height: 50rem;">
					<pagination style="position: absolute;bottom:0;right: 0;" v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
					            :limit.sync="queryParams.pageSize" @pagination="getList" />
				</div>
			</div>
		</div>


		<FooTer></FooTer>
	</div>
</template>

<script>
import HeaDer from '../../components/HomePage/header'
import FooTer from '../../components/HomePage/footer'
import { listTrainingPublic} from "@/api/activity/training";
export default {
	data() {
		return{
      total:0,
      publicList:[],
			breadcrumb:[
        {
          name:"首页",
          path:"/hp"
        },
				{
					name:"活动培训列表",
					path:""
				}
			],
			input_top_right:"",
			tabs1_xl:[
				{
					name:"不限"
				},
				{
					name:"公益"
				},
				{
					name:"收费"
				}
			],
			tabs2_xl:[
				{
					name:"不限"
				},
				{
					name:"报名"
				},
				{
					name:"开课"
				},
        {
          name:"结束"
        }
			],
		queryParams:{
      pageNum: 1,
      pageSize: 5,
      activityName:null,
      type:null,
      status:null
         }
		}
	},
  created() {
    this.getList();
  },
  computed: {
	  totalItems() {
	    return this.column_xl.length;
	  },
	  paginatedData() {
	    const start = (this.pageNum - 1) * this.pageSize;
	    const end = this.pageNum * this.pageSize;
	    return this.column_xl.slice(start, end);
	  }
	},
	methods:{
    getList(){
      listTrainingPublic(this.queryParams).then(res=>{
        this.publicList=res.rows;
        this.total=res.total;
      })
    },
    baoming(activity){
       this.$router.push({path:'/hdpxd',query:{id:activity.activityId}});
    },
		tabs1(e,name){
      if (name==='不限'){
        this.queryParams.type=null;
      }else {
        this.queryParams.type=name;
      }
			var tabs1=e.target.parentNode.childNodes;
			for (let i = 0; i < tabs1.length; i++) {
					tabs1[i].classList.remove("on");
			}
			e.target.className="on";
      this.getList();
		},
		tabs2(e,name){
      if (name==='不限'){
        this.queryParams.status=null;
      }else {
        this.queryParams.status=name;
      }
			var tabs2=e.target.parentNode.childNodes;
			for (let i = 0; i < tabs2.length; i++) {
					tabs2[i].classList.remove("on");
			}
			e.target.className="on";
      this.getList();
		},
		tabs3(e){
			var tabs3=e.target.parentNode.childNodes;
			for (let i = 0; i < tabs3.length; i++) {
					tabs3[i].classList.remove("on");
			}
			e.target.className="on";
		},
		more_xl(e){

			if(e.target.className==="btns-xl"){
			  e.target.className="btns-xl on"
			}else{
			  e.target.className="btns-xl"
			}
			// console.log(i);
			var more_xl = document.querySelector('.right3');
			console.log(more_xl.className);
			if(more_xl.className==="right-xl right3"){
			  more_xl.className="right-xl right3 on"
			}else{
			  more_xl.className="right-xl right3"
			}
		},
		handleSizeChange(size) {
		  this.pageSize = size;
		},
		handleCurrentChange(page) {
		  this.pageNum = page;
		}
	},
	components: {
		HeaDer,
		FooTer
	}
}
</script>

<style scoped>
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
form,
fieldset,
input,
textarea,
p,
blockquote,
th,
td {
	margin: 0;
	padding: 0;
}

ol,
ul {
	list-style: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-size: 100%;
	font-weight: normal;
}
.body-xl {
	height: 100%;
	width:100%;
	/* font: 14rem arial; */
	font-size: 16rem;
	font-family:PingFang SC,Microsoft YaHei,Arial, sans-serif;
	color: #666;
}
.top-xl{
	width:100%;
	height:64rem;
	background-color: #f8f9fb;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	align-items: center;
	box-shadow: 1rem 3rem rgba(0, 0, 0, .03);
}
.row-xl{
	width:1532rem;
	margin: 0 auto;
}
.top-xl>.row-xl{
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	justify-content: space-between;
}
.top-xl>.row-xl>.left-xl{
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	align-items: center;
}
.top-xl>.row-xl>.right-xl{
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 46rem;
	width: 360rem;
}
.top-content-xl{
	width: 100%;
}
.top-content-xl>.row-xl{
	box-shadow:0 0 6rem 0 rgba(0, 0, 0, .1);
	padding: 30rem;
	margin-top: 28rem;
	margin-bottom: 30rem;
}
.top-content-xl>.row-xl>.tabs-xl{
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	margin-bottom: 18rem;
}
.top-content-xl>.row-xl>.tabs-xl:last-child{
	margin-bottom: 0rem;
}
.top-content-xl>.row-xl>.tabs-xl>.left-xl{
	white-space: nowrap;
	padding-top: 4rem;
}
.top-content-xl>.row-xl>.tabs-xl>.right-xl{
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	flex-wrap: wrap;
}
.top-content-xl>.row-xl>.tabs-xl>.right-xl{
	height: 30rem;
	overflow: hidden;
}
.top-content-xl>.row-xl>.tabs-xl>.right-xl.on{
	height: auto;
	overflow: auto;
}
.top-content-xl>.row-xl>.tabs-xl>.right-xl>li{
	margin-right: 40rem;
	padding: 3rem 8rem;
	cursor: pointer;
	margin-bottom: 5rem;
}
.top-content-xl>.row-xl>.tabs-xl>.right-xl>li.on{
	color: #12ba5e;
	background-color: #e9fff3;
}
.top-content-xl>.row-xl>.tabs-xl>.right-xl>li>span{
	pointer-events: none;
}
.top-content-xl>.row-xl>.tabs-xl>.btns-xl{
	padding-right: 22rem;
	background:url(../../assets/images/down.png) no-repeat scroll;
	background-position: right center;
	cursor: pointer;
	white-space: nowrap;
	height: 24rem;
}
.top-content-xl>.row-xl>.tabs-xl>.btns-xl.on{
	padding-right: 22rem;
	background:url(../../assets/images/up.png) no-repeat scroll;
	background-position: right center;
}
.top-content-xl>.row-xl>.tabs-xl>.btns-xl>i{
	font-style: normal;
	display: none;
	pointer-events: none;
}
.top-content-xl>.row-xl>.tabs-xl>.btns-xl>span{
	pointer-events: none;
}
.top-content-xl>.row-xl>.tabs-xl>.btns-xl.on>span{
	display: none;
}
.top-content-xl>.row-xl>.tabs-xl>.btns-xl.on>i{
	font-style: normal;
	display: block;
}
.main-xl{
	padding-bottom: 100rem;
	position:relative;
}
.main-xl>.row-xl{
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	flex-wrap: wrap;
}
.column-xl{
	width: 280rem;
	height: 370rem;
	border: solid 1px #e5e8ed;
	margin-right:32rem;
	box-shadow: 0 0 10rem 0 rgba(0, 0, 0, .1);
	margin-bottom: 29rem;
}
.column-xl:nth-child(5n+5){
	margin-right: 0;
}
.column-xl>.bg-xl{
	width:100%;
	height:109rem;
	position: relative;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	align-items: center;
}
.column-xl>.bg-xl>img{
	width:100%;
	height:100%;
}
.column-xl>.bg-xl>span{
    width: 64%;
    position: absolute;
    z-index: 1;
    display: inline-block;
    left: 10rem;
    font-size: 16.5rem;
    font-weight: bold;
    color: #549b6b;
    overflow-y: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.column-xl>.bg-xl>i{
	width:60rem;
	height:22rem;
	background:url(../../assets/images/xl-bg-jiao_03.png) no-repeat scroll;
	background-size: 100% 100%;
	position: absolute;
	right: 0;
	top: -4rem;
	font-style: normal;
	color: white;
	align-items: center;
	justify-content: center;
	display: none;
}
.column-xl.on>.bg-xl>i{
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
}
.center-content-xl{
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	align-items: center;
	padding-left: 11rem;
}
.center-content-xl>.left-xl{
	width: 60rem;
	height: 60rem;
	background-color: white;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 30rem;
	margin-right: 4rem;
	margin-top: -16rem;
	position: relative;
	z-index: 1;
}
.center-content-xl>.left-xl>img{
	width: 46rem;
	height: 46rem;
}
.column-xl>.title-xl{
	padding-left: 17rem;
	padding-right: 17rem;
	width: 100%;
	overflow-y: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	font-size: 16rem;
	font-weight: bold;
	color: #222;
	margin-top: 15rem;
	line-height: 26rem;
	height: 52rem;
}
.column-xl>.bottom-xl{
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	justify-content: space-between;
	padding-left: 17rem;
	padding-right: 17rem;
	margin-top: 15rem;
}
.column-xl>.bottom-xl>.left-xl{
	padding-left: 12rem;
	padding-right: 12rem;
	border:solid 1px transparent;
	font-size:16rem;
	font-weight: bold;
}
.column-xl>.bottom-xl>.left-xl.state1{
	border: solid 1px #ff7300;
	color: #ff7300;
}
.column-xl>.bottom-xl>.left-xl.state2{
	border: solid 1px #666;
	color: #666;
}
.column-xl>.address-xl{
	padding-left: 38rem;
	padding-right: 17rem;
	background:url(../../assets/images/xl-img-dingwei.png) no-repeat scroll;
	background-position:7% center;
	margin-top: 20rem;
	white-space:nowrap;
	text-overflow: ellipsis;
	overflow-x: hidden;
}
.column-xl>.btn-xl{
	margin-left: 17rem;
	margin-right: 17rem;
	height: 34rem;
	background-color: #549b6b;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	cursor: pointer;
	margin-top: 15rem;
}
.column-xl>.btn-xl2{
  margin-left: 17rem;
  margin-right: 17rem;
  height: 34rem;
  background-color: #7b7b7b;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  cursor: pointer;
  margin-top: 15rem;
}
::v-deep .el-pagination.is-background .el-pager li:not(.disabled):hover{
	color: #35a266;
}
::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active{
	background-color: #35a266;
}
</style>
